<template>
	<view class="main">
		<view class="notice">
			<!-- 让通知吸顶 -->
			<u-sticky offset-tp="10">
				<u-notice-bar :text="text" mode="closable"></u-notice-bar>
			</u-sticky>
		</view>
		<view class="textArea">
			<!-- 文本域 -->
			<view class="area">
				<u--textarea v-model="textAreaValue" :placeholder="suggestion" autoHeight :maxlength="maxLength"
					:count="true" confirmType="done"></u--textarea>
			</view>
			<view class="clearArea">
				<u-button type="primary" icon="trash-fill" size="mini" color="#74787a"
					@click="clearContent()"></u-button>
			</view>
			<view class="button">
				<u-button type="primary" text="提交" color="#1ba784" @click="submit()" shape="circle"></u-button>
			</view>
		</view>
		<!-- 消息提示框 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				maxLength: 200,
				textAreaValue: "",
				suggestion: "在此提出你们的建议和想法",
				text: "部分功能尚未做,或想对部分功能给出建议,可以在下面给出你的建议!",
				ToastList: [{
					type: 'success',
					title: '成功主题(带图标)',
					message: "提交成功ヾ(◍°∇°◍)ﾉﾞ!",
					duration: 2500,
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
				}, {
					type: 'error',
					title: '失败主题',
					message: "提交失败,请登录后再次尝试╥﹏╥",
					duration: 2500,
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/error.png'
				}]
			};
		},
		methods: {
			// 消息提示框
			showToast(params) {
				this.$refs.uToast.show({
					...params,
				})
			},
			clearContent() {
				this.textAreaValue = "";
			},
			submit() {
				//发送reqeust请求
				this.$request("/suggestion/save", "POST", {
					content: this.textAreaValue
				}, {
					token: uni.getStorageSync("token"),
					"content-type": "application/json"
				}).then(res => {
					if (res.data.code == 1 || res.data.code == 200) {
						this.clearContent();
						this.showToast(this.ToastList[0]);
					}
				}).catch(error => {
					this.showToast(this.ToastList[1]);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.notice {
			margin-top: 2%;
		}

		.textArea {
			margin-top: 20%;
			padding: 0% 5%;

			.area {}

			.clearArea {
				margin-top: 5%;
				padding: 0% 70% 0% 0%;
			}

			.button {
				margin-top: 5%;
			}
		}
	}
</style>